<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import myAxios from '../../../plugins/myAxios.js'

// 表格数据
const tableData = ref([])

// 申请表单数据
const dialogVisible = ref(false)
const formData = ref({
  reasonContent: ''
})

// 表单规则
const rules = {
  reasonContent: [
    { required: true, message: '请输入申请原因', trigger: 'blur' },
    { min: 6, message: '申请原因不能少于6个文字', trigger: 'blur' }
  ]
}

const formRef = ref(null)

// 获取免测申请列表
const getExemptionList = async () => {
  try {
    const data  = await myAxios.get('/student/exemption/getCurrentList')
    tableData.value = data
  } catch (error) {
    ElMessage.error('获取列表失败')
  }
}

// 处理新增申请
const handleAdd = () => {
  dialogVisible.value = true
  formData.value = {
    reasonContent: ''
  }
}

// 提交申请
const submitForm = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        await myAxios.post('/student/exemption/submit', {reasonContent:formData.value.reasonContent})
        ElMessage.success('申请提交成功')
        dialogVisible.value = false
        getExemptionList() // 刷新列表
      } catch (error) {
        ElMessage.error('申请提交失败')
      }
    }
  })
}

// 状态转换函数
const getStatusType = (status) => {
  const statusMap = {
    0: 'warning',  // 待审核
    1: 'success',  // 通过
    2: 'danger'    // 驳回
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = {
    0: '待审核',
    1: '已通过',
    2: '已驳回'
  }
  return statusMap[status] || '未知状态'
}

onMounted(() => {
  getExemptionList()
})
</script>

<template>
  <div class="exemption-container">
    <div class="header">
      <h2>免测申请列表</h2>
      <el-button type="primary" @click="handleAdd">新增申请</el-button>
    </div>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="studentNumber" label="学号" width="120" />
      <el-table-column prop="reasonContent" label="申请原因" show-overflow-tooltip />
      <el-table-column prop="applyTime" label="申请时间" width="180" />
      <el-table-column prop="applyStatus" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.applyStatus)">
            {{ getStatusText(row.applyStatus) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="reviewBy" label="审核人" width="120" />
      <el-table-column prop="reviewComment" label="审核意见" show-overflow-tooltip />
    </el-table>

    <!-- 新增申请对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="新增免测申请"
      width="500px"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="申请原因" prop="reasonContent">
          <el-input
            v-model="formData.reasonContent"
            type="textarea"
            rows="4"
            placeholder="请详细描述申请原因"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">
            提交申请
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.exemption-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.el-upload__tip {
  color: #909399;
  font-size: 12px;
  margin-top: 5px;
}
</style>